import {useQuery} from '@/hooks/useQuery'
import {useCallback, useEffect, useState} from 'react'
import {orderPayment, orderTotalMoney} from '@/api'
import styled from './index.module.scss'
import {Button, Input, Table, Form, message} from 'antd'
import {useNavigate} from 'react-router-dom'

const {Item, useForm} = Form

const Order = () => {
	const query = useQuery<{ids: string}>()

	const [money, setMoney] = useState<number>(0)

	const [list, setList] = useState([])

	// const [active, setActive] = useState<boolean>(false)

	const [form] = useForm<{money: string}>()

	const navigate = useNavigate()

	useEffect(() => {
		if (query) {
			orderTotalMoney(query).then(res => {
				if (res.code === 200) {
					setMoney(res.data.totalMoney)
					setList(res.data.table)
					form.setFieldsValue({
						money: res.data.totalMoney as string
					})
				}
			})
		}
	}, [query])

	const onFinish = useCallback(() => {
		if (query) {
			orderPayment(query).then(res => {
				if (res.code === 200) {
					message.success(res.message)
					setTimeout(() => {
						navigate("/home/main", {
							replace: true
						})
					}, 100)
				}
			})
		}
	}, [query])

	return (
		<div className={styled.order}>
			<header>
				<span>共{
					query.ids ? query.ids.split(',').length : 0
				}笔订单</span>
				<span>订单金额<span className={styled.money}>{money && money.toFixed(2)}</span>元</span>
			</header>
			<main>
				<Table
					title={() => "订单信息"}
					columns={[
						{
							title: '名称',
							dataIndex: 'name',
							align: 'center'
						},
						{
							title: '价格',
							dataIndex: 'money',
							align: 'center'
						}
					]}
					rowKey={'name'}
					dataSource={list}
					bordered
					pagination={false}
					size={'small'}
				/>
				<div className={styled.order_main}>
					<div className={styled.order_main_box}>
						<div>
							<Form layout={"vertical"} form={form} onFinish={onFinish}>
								<Item label={"请输入订单金额"} rules={[
									{
										pattern: new RegExp(money.toString()),
										message: "请输入正确的订单金额"
									},
									{
										required: true
									}
								]} colon={true} name="money">
									<Input disabled></Input>
								</Item>
								<Item>
									{/*<Button type={"primary"} htmlType={"submit"}>确定</Button>*/}
								</Item>
							</Form>
						</div>
					</div>
				</div>

			</main>
		</div>
	)
}
export default Order
